<template>
  <div>
    <!-- 模块1--头部搜索 -->
    <!-- 布局组件--van-row 顶部搜索 -->
   <div class="searchlist-top">
     <van-row class="top-search">
      <van-col span="2">
        <!-- 顶部导航 -->
        <van-nav-bar left-arrow @click-left="onClickLeft" />
      </van-col>
      <van-col span="22">
        <!-- 搜索组件 -->
        <van-search show-action placeholder="请输入搜索关键词"></van-search>
      </van-col>
    </van-row>
   </div>
    <!--模块2-- 下拉菜单 -->
   <div class="searchlist-menu">
     <van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="option1" />
      <van-dropdown-item v-model="value2" :options="option2" />
      <van-dropdown-item v-model="value3" :options="option2" />
    </van-dropdown-menu>
   </div>
   <!-- 模块3--商品列表 -->
   <div class="searchlist-product">
     <van-list>
      <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
      <!-- 商品卡片 -->
      <van-card
        v-for="item in productList"
        :key="item.id"
        :desc="item.name"
        :price="`${item.retail_price}起`"
        :title="item.name"
        :thumb="item.list_pic_url"
      >
        <template #tags class="product-advantage">
          <van-tag plain type="danger" class="price-confirmed">30天价保</van-tag>
          <van-tag plain type="danger" class="member">VIP会员</van-tag>
        </template>
      </van-card>
    </van-list>
   </div>
   
    <!-- <van-divider dashed>商品已到底啦！</van-divider> -->
  </div>
</template>

<script>
import { search } from "@/api/search.js";
export default {
  name: "",
  data() {
    return {
      productList: [],
      value1: 0,
      value2: "b",
      value3: "c",
      option1: [
        { text: "综合", value: 0 },
        { text: "新品优先", value: 1 }
      ],
      option2: [
        { text: "默认排序", value: "a" },
        { text: "好评排序", value: "b" },
        { text: "销量", value: "c" }
      ]
    };
  },
  async created() {
    let keyword = this.$route.query.keyword;
    let res = await search(keyword);
    let data = res.data;
    console.log(data);
    this.productList = data.data.goodsList;
    console.log(this.productList);
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="scss">

.searchlist-product{
// 商品卡片样式
.van-card__title{
  font-size: 14px;
}
.van-card .van-card__price {
  color: #ef791e;

  // 商品价格
  .van-card__price-integer {
    font-size: 16px;
  }
}
// 商品描述信息
.van-card__desc {
  margin-bottom: 5px;
  color:#818181;
  font-size:10px
}
.product-advantage{
  // margin-bottom: 10px;
}
// 30天报价
.price-confirmed {
  border: 1px solid #3579c2;
  color: #3579c2 !important;
  border-radius: 5px;
  padding: 2px;
  margin-right: 10px;
}
// 会员
.member {
  background: #f9ddcb;
  color: #3e2819;

  border-radius: 5px;
  padding: 2px;
}
}

</style>
